<template>
<div class="goodsList">
  <search-block type="block">
    <el-form inline :model="search" class="goods-search-form">
      <el-form-item label="商品名称:">
        <el-input v-model="search.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="货号:">
        <el-input v-model="search.productSn" clearable></el-input>
      </el-form-item>
      <el-form-item label="商品类别:">
        <el-select v-model="search.tag" @change="search.productCategoryId = ''" class="sp-select">
          <el-option label="商城商品" :value="0"></el-option>
          <el-option label="商品" :value="1"></el-option>
        </el-select>
        <y-overflow-tooltip
          style="margin-left:10px;"
          v-if="search.tag !== ''">
          <el-cascader
            v-model="search.productCategoryId"
            clearable
            :options="classifyData.filter(item => search.tag === '' || search.tag === item.tag)"
            :props="{
            label: 'name',
            value: 'id'
          }"></el-cascader>
        </y-overflow-tooltip>
      </el-form-item>
      <el-form-item label="发布状态:">
        <el-select v-model="search.publishStatus" clearable>
          <el-option label="已发布" :value="1"></el-option>
          <el-option label="未发布" :value="0"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="goods-buttons">
      <el-button @click="resetSearch">重置</el-button>
      <el-button type="primary" @click="searchTable(true)">查询</el-button>
      <el-button type="primary" @click="() => addGoods()">添加</el-button>
    </div>
  </search-block>
  <y-table
    ref="table"
    border
    pagination
    :getDataWay="getDataWay"
    :columns="columns"
  >
    <el-table-column slot="imgUrl" label="图标" align="center" header-align="center" width="85">
      <template v-slot="{row}">
        <img v-if="row.imgUrl" style="height: 40px;width: 40px" :src="generateMediaUrl({fileOpenUrl: row.imgUrl})"/>
      </template>
    </el-table-column>
    <el-table-column slot="name" label="商品名称/标题" align="center" header-align="center" min-width="300">
      <template v-slot="{row}">
        <div>{{row.name}}</div>
        <div>{{row.subTitle}}</div>
      </template>
    </el-table-column>
    <el-table-column slot="price" label="商品价格/货号" align="center" header-align="center" min-width="250">
      <template v-slot="{row}">
        <div>价格：{{generatePrice(row)}}</div>
        <div>货号：{{row.productSn}}</div>
      </template>
    </el-table-column>
    <el-table-column slot="SKU" label="库存" align="center" header-align="center" min-width="80">
      <template v-slot="{row}">
        <el-button type="primary" icon="el-icon-edit" circle @click="showSku(row)"></el-button>
      </template>
    </el-table-column>
    <el-table-column slot="publishStatus" label="发布" align="center" header-align="center" min-width="80">
      <template v-slot="{row}">
        <el-popconfirm
          v-if="row.tag === 0"
          :title="row.publishStatus === 0 ? '是否确认发布？' : '是否确认撤销发布？'"
          @confirm="publish(row)">
          <el-switch
            disabled
            slot="reference"
            v-model="row.publishStatus"
            :active-value="1"
            :inactive-value="0"></el-switch>
        </el-popconfirm>
      </template>
    </el-table-column>
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="210">
      <template v-slot="{row}">
        <div class="table-buttons">
          <el-button size="mini" @click="showDetails(row)">预览</el-button>
          <el-button size="mini" v-if="row.publishStatus === 1 && row.tag === 0" @click="editGoods(row)">查看</el-button>
          <el-button type="primary" size="mini" v-else @click="editGoods(row)">编辑</el-button>
          <el-popconfirm
            v-if="!row.lockStatus"
            title="是否确认删除该商品？"
            @confirm="delGoods(row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
  </y-table>
  <el-drawer
    :key="refreshKey"
    :visible.sync="forms.showForm"
    :title="forms.formTypeTitle[forms.formsType]"
    :size="1000"
    :wrapperClosable="false"
    destroy-on-close>
    <goods-details
      :is-published="forms.isPublished"
      :goods-id="forms.goodsId"
      @success="searchTable(forms.formsType === 'ADD')"
      @close="closeDrawer">
    </goods-details>
  </el-drawer>
  <el-dialog
    :visible.sync="watchDetails.show"
    title="详情预览"
    @open="getDetails"
    @closed="hideDetails">
    <div class="watch-details ql-editor" v-loading="watchDetails.loading" v-html="watchDetails.content"></div>
  </el-dialog>
  <el-dialog
    :visible.sync="searchSku.show"
    width="800px"
    destroy-on-close
    title="编辑库存"
    @closed="hideSku">
    <goods-list-s-k-u
      :visible="searchSku.show"
      :product-id="searchSku.productId"
      :product-sn="searchSku.productSn"
      :is-publish="searchSku.isPublish"></goods-list-s-k-u>
  </el-dialog>
</div>
</template>

<script>
import goodsDetails from "./goodsDetails/goodsDetails";
import goodsListSKU from "./goodsListSKU";
export default {
  name: "goodsList",
  components: { goodsDetails, goodsListSKU },
  inject: ['generateMediaUrl'],
  computed:{
    getDataWay(){
      return {
        dataType: 'url',
        data: this.$api.goods.goodsList,
        param: this.searchData
      }
    },
    searchData(){
      let obj = {...this.search};
      if(Array.isArray(obj.productCategoryId)){
        obj.productCategoryId = obj.productCategoryId.join('/');
      }
      return obj;
    }
  },
  data(){
    return{
      refreshKey: 0,
      search:{
        productCategoryId: '',
        productSn: '',
        tag: 0,
        publishStatus: '',
        name: ''
      },
      classifyData: [],
      columns: [{
        label: "商品图标",
        prop: "imgUrl",
        template: true,
      },{
        label: "商品名称/标题",
        prop: "name",
        template: true
      },{
        label: "商品来源",
        prop: "tag",
        formatter(row){
          if(row.tag === 0) return '商城商品';
          if(row.tag === 1) return '商品';
          return '';
        }
      },{
        label: "价格/货号",
        prop: "price",
        template: true
      },{
        label: "库存",
        prop: "SKU",
        template: true
      },{
        label: "发布",
        prop: "publishStatus",
        template: true
      }],
      forms:{
        formsType: '',
        formTypeTitle: {
          'ADD': '添加商品',
          'EDIT': '编辑商品',
          'VIEW': '查看商品'
        },
        isPublished: false,
        goodsId: null,
        showForm: false,
      },
      watchDetails:{
        row: null,
        show: false,
        content: '',
        loading: false
      },
      searchSku:{
        show: false,
        productId: '',
        productSn: '',
        isPublish: true,
      }
    }
  },
  mounted(){
    this.initClassify();
  },
  methods:{
    initClassify(){
      this.$yAxios({
        url: this.$api.goods.getAllClassify
      }, info => {
        this.classifyData = info;
      });
    },
    resetSearch(){
      Object.keys(this.search).map(key => this.search[key] = (key === 'tag' ? 0 : ''));
    },
    generatePrice(row){
      if(!row.minPrice && !row.maxPrice){
        return '无'
      }else if(!row.minPrice){
        return '￥' + row.maxPrice
      }else if(!row.maxPrice){
        return '￥' + row.minPrice
      }else{
        if(row.minPrice === row.maxPrice){
          return '￥' + row.minPrice
        }else{
          return '￥' + row.minPrice + '~￥' + row.maxPrice
        }
      }
    },
    addGoods(){
      this.forms.formsType = 'ADD';
      this.forms.goodsId = null;
      this.forms.isPublished = false;
      this.forms.showForm = true;
    },
    editGoods(row){
      let isView = (row.publishStatus === 1 && row.tag === 0);
      this.forms.formsType = isView ? 'VIEW' : 'EDIT';
      this.forms.goodsId = row.id;
      this.forms.isPublished = isView;
      this.forms.showForm = true;
    },
    delGoods(row){
      this.$yAxios({
        url: this.$api.goods.removeGoods,
        data:{
          id: row.id
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.searchTable();
      })
    },
    closeDrawer(){
      this.forms.showForm = false;
      this.refreshKey ++ ;
    },
    searchTable(jumpToFirst){
      this.$refs['table'].loadData(this.searchData, jumpToFirst);
    },
    publish(row){
      this.$yAxios({
        url: this.$api.goods.publishGoods,
        data: {
          productId: row.id,
          publishStatus: row.publishStatus ^ 1
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '发布状态修改成功'
        });
        this.searchTable();
      })
    },
    showDetails(row){
      this.watchDetails.row = row;
      this.watchDetails.show = true;
    },
    hideDetails(){
      this.watchDetails.row = null;
      this.watchDetails.content = '';
    },
    getDetails(){
      this.watchDetails.loading = true;
      this.$yAxios({
        url: this.$api.goods.selectGoodsImageText,
        data:{
          productId: this.watchDetails.row.id
        }
      }, info => {
        this.watchDetails.content = info.content || '';
        this.watchDetails.loading = false;
      }, e => {
        this.watchDetails.loading = false;
      });
    },
    showSku(row){
      this.searchSku.productId = row.id;
      this.searchSku.productSn = row.productSn;
      this.searchSku.isPublish = row.publishStatus === 1;
      this.searchSku.show = true;
    },
    hideSku(){
      this.$nextTick(() => {
        this.searchSku.productId = '';
        this.searchSku.productSn = '';
        this.searchSku.isPublish = true;
      })
    }
  }
}
</script>

<style scoped lang="less">
.goodsList{
  .SearchBlock.block{
    .sp-select:not(:last-child){
      width: 120px;
      flex-shrink: 0;
    }
    /deep/.search-buttons{
      display: none;
    }
    .goods-buttons{
      margin-top: 20px;
      >.el-button{
        min-width: 100px;
      }
    }
  }
  /deep/ .watch-details{
    min-height: 50vh;
  }
}
</style>